<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../../css/common.css">
		<link rel="stylesheet" type="text/css" href="../../css/icomoon/style.css">
		<script type="text/javascript" src="../../js/rem.js"></script>
	</head>
	<body onload="loaded()">
		<div class="m-project m-project-1">
			<div class="hd f-pr">
				<h3 class="title">
					<span><i class="sign sign1">体</i>体验标-2017030801</span>
					<i class="icon-angle-left f-fl"></i>
				</h3>
				<div class="rate-box">
					<p class="high-color">9.2<span>%</span></p>
					<p>预期收益</p>
				</div>
				<div class="tabs f-pa">
					<p>
						<span>2个月</span>
						<span>期限</span>
					</p>
					<p>
						<span>200,000</span>
						<span>项目总额(元)</span>
					</p>
					<p>
						<span>25</span>
						<span>已购人数</span>
					</p>
				</div>
			</div>
			<div class="percent-box">
				<div class="detail">
					<p class="percent-bar f-pr">
						<span class="child f-pa" style="width: 60%;"></span>
					</p>
					<p class="info clearfix">
						<span class="f-fl">购买进度<span class="color">65%</span></span>
						<span class="f-fr">剩余可投<span class="color">125,000</span>元</span>
					</p>
				</div>
			</div>
			<div class="project-tabs">
				<a href="javascript:;" class="tab">
					<img src="../../images/project-icon-1.png">
					<span>利率高</span>
				</a>
				<a href="javascript:;" class="tab">
					<img src="../../images/project-icon-2.png">
					<span>车辆抵押</span>
				</a>
				<a href="javascript:;" class="tab">
					<img src="../../images/project-icon-3.png">
					<span>无限购</span>
				</a>
				<a href="javascript:;" class="tab">
					<img src="../../images/project-icon-4.png">
					<span>安全保障</span>
				</a>
			</div>
			<div class="wrapper" id="wrapper">
				<div id="scroller">
					<ul class="info-list">
						<li class="bb f-pr">
							<img src="../../images/project-icon-14.png">
							<span>项目介绍</span>
							<i class="icon-up f-pa"></i>
						</li>
					</ul>
					<div class="exprinfo">
						<div class="item">
							<p class="tit"><i class="line"></i>什么是体验标？</p>
							<p>体验标是无忧微贷设立的一个专门提供给平台新用户投资体验的虚拟项目。用户只可使体验金进行投资，项目到期后体验金本金由平台收回。收益发放到投资人个人账户，可用于平台其他项目投资。</p>
						</div>
						<div class="item">
							<p class="tit"><i class="line"></i>温馨提示</p>
							<p><label>1、</label><span>仅限新注册的用户及注册后未投资的用户，每位用户只拥有一次体验机会。</span></p>
							<p><label>2、</label><span>体验金只可用于体验标项目，不同时参与平台其他活动。</span></p>
							<p><label>3、</label><span>本次活动由无忧微贷发起，最终解释权归无忧微贷所有。</span></p>
						</div>
					</div>
				</div>
			</div>
			
			<div class="invest-box">
				<span class="calculation f-fl" id="count"><img src="../../images/project-icon-9.png"></span>
				<a href="javascript:;" class="invest-btn">立即投资</a>
			</div>
		</div>

		<div class="overlay">
			<div class="modal modal-cal">
				<h3 class="f-pr">
					<span>收益计算器</span>
					<a class="close f-pa" id="close"></a>
				</h3>
				<div class="cal clearfix">
					<p class="f-fl">
						<span>0.00</span>
						<span>预计总收益(元)</span>
					</p>
					<p class="f-fr">
						<span>2</span>
						<span>投资期限(月)</span>
					</p>
				</div>
				<div class="ipt-box f-pr">
					<span>充值金额：</span>
					<input type="num" class="f-pa" placeholder="请输入投资金额">
					<i class="close-icon f-pa"></i>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../../js/zepto.min.js"></script>
		<script type="text/javascript" src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/iscroll.js"></script>
		<script type="text/javascript" src="../../js/scroller.js"></script>

		<script type="text/javascript">
			$(function(){
				var $pop = $(".overlay");

	            function modalHidden($ele) {
	                $ele.removeClass("modal-in");
	                $ele.one("transitionend", function() {
	                    $ele.css("display", "none");
	                    $pop.removeClass("active");
	                });
	            }

	            $("#count").on("click", function() {
	                $pop.addClass("active");
	                var $modal = $(".modal");
	                $modal.css("display", "block");
	                $modal.addClass("modal-in");

	                $("#close").on("click", function(e) {
	                    modalHidden($modal);
	                    e.stopPropagation();
	                });

	                $(".overlay").on("click", function(e) {
	                    if (e.target.classList.contains("overlay")) {
	                        modalHidden($modal);
	                    }
	                });
	            });

	            $('.info-list li').on('tap', function(){
	            	var icon = $('.icon-up');
	            	if(!icon.hasClass('down')){
	            		icon.addClass('down');
	            		$('.exprinfo').addClass('hide');
	            	}else{
	            		icon.removeClass('down');
	            		$('.exprinfo').removeClass('hide');
	            	}
	            })
			});
		</script>
	</body>
</html>